<template>
  <n-avatar :color="color" :size="size" :class="props.alpha ? [`opacity-${props.alpha}`] : []">
    <ChatGPTIcon v-if="iconStyle == 'default'" :size="48" />
    <n-icon v-else-if="iconStyle == 'browsing'" size="48">
      <svg
        viewBox="0 0 512 512"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g transform="translate(78.000000, 46.000000)" fill="#FFFFFF" fill-rule="nonzero">
            <path
              id="路径"
              d="M300.077185,12.30571 C297.624859,4.95634258 290.74672,0 283,0 C275.25328,0 268.375141,4.95634258 265.922815,12.30571 L253.629299,49.2172499 C251.837801,54.5982075 247.616125,58.8204866 242.235936,60.6122409 L205.303952,72.9075134 C197.955634,75.3601902 193,82.2393117 193,89.9871388 C193,97.734966 197.955634,104.614087 205.303952,107.066764 L242.235936,119.387759 C247.610351,121.174214 251.830958,125.385896 253.629299,130.757028 L265.922815,167.69429 C268.375141,175.043657 275.25328,180 283,180 C290.74672,180 297.624859,175.043657 300.077185,167.69429 L312.370701,130.757028 C314.162199,125.37607 318.383875,121.153791 323.764064,119.362037 L360.696048,107.066764 C368.044366,104.614087 373,97.734966 373,89.9871388 C373,82.2393117 368.044366,75.3601902 360.696048,72.9075134 L323.764064,60.6122409 C318.383875,58.8204866 314.162199,54.5982075 312.370701,49.2172499 L300.077185,12.2799877 L300.077185,12.30571 Z"
            />
            <path
              id="形状"
              d="M189.79315,52.427538 C177.465363,60.0261181 167.954617,71.5790614 167.954617,89.8001465 C167.954617,128.568413 211.03726,137.174968 232.565659,141.491168 C236.881677,163.020478 245.487868,206.104945 284.254493,206.104945 C309.271888,206.104945 321.728897,188.16816 328.577668,169.662775 C350.472043,240.924449 322.78688,318.091821 260.58503,359.17993 C198.383179,400.268039 116.544719,395.447687 59.5960392,347.341515 C2.6473599,299.235343 -15.7881367,219.351426 14.3198719,151.152734 C44.4278805,82.9540432 115.876883,42.7552337 189.79315,52.427538 L189.79315,52.427538 Z M213.621702,336.469701 C254.941714,320.360792 284.770769,283.740153 292.188729,240.014255 L242.438227,240.014255 C239.577349,273.815721 229.766958,306.662125 213.621702,336.495546 L213.621702,336.469701 Z M135.649096,240.0401 C138.972417,272.556269 150.05122,303.799816 167.954617,331.145526 C185.858015,303.799816 196.936818,272.556269 200.260138,240.0401 L135.649096,240.0401 L135.649096,240.0401 Z M43.6946615,240.0401 C51.104266,283.775743 80.9346687,320.407851 122.261689,336.521392 C106.128145,306.69413 96.3266421,273.856825 93.4710082,240.065946 L43.6946615,240.065946 L43.6946615,240.0401 Z M167.954617,106.909875 C150.047341,134.263178 138.968377,165.516042 135.649096,198.041145 L200.260138,198.041145 C196.940858,165.516042 185.861894,134.263178 167.954617,106.909875 L167.954617,106.909875 Z M43.6946615,198.041145 L93.4710082,198.041145 C96.3311519,164.239541 106.141587,131.392989 122.287533,101.559854 C80.9675205,117.668763 51.1384658,154.289402 43.7205059,198.0153 L43.6946615,198.041145 Z"
            />
          </g>
        </g>
      </svg>
    </n-icon>
    <n-icon v-else-if="iconStyle == 'plugins'" size="48">
      <svg
        width="512px"
        height="512px"
        viewBox="0 0 512 512"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <rect id="矩形" x="0" y="0" width="512" height="512" />
          <g id="编组" transform="translate(101.000000, 78.000000)" fill="#FFFFFF" fill-rule="nonzero">
            <path
              id="路径"
              d="M271.584847,10.8700438 C269.418625,4.37810261 263.342936,0 256.5,0 C249.657064,0 243.581375,4.37810261 241.415153,10.8700438 L230.555881,43.4752374 C228.973391,48.2284166 225.244244,51.9580965 220.491744,53.5408128 L187.868491,64.4016369 C181.377477,66.568168 177,72.6447253 177,79.4886393 C177,86.3325533 181.377477,92.4091106 187.868491,94.5756418 L220.491744,105.459187 C225.239143,107.037222 228.967347,110.757541 230.555881,115.502041 L241.415153,148.129956 C243.581375,154.621897 249.657064,159 256.5,159 C263.342936,159 269.418625,154.621897 271.584847,148.129956 L282.444119,115.502041 C284.026609,110.748862 287.755756,107.019182 292.508256,105.436466 L325.131509,94.5756418 C331.622523,92.4091106 336,86.3325533 336,79.4886393 C336,72.6447253 331.622523,66.568168 325.131509,64.4016369 L292.508256,53.5408128 C287.755756,51.9580965 284.026609,48.2284166 282.444119,43.4752374 L271.584847,10.8473225 L271.584847,10.8700438 Z"
            />
            <path
              id="路径"
              d="M272.277595,228.551126 C267.098902,222.986303 260.625537,218.102886 253.039206,218.102886 C247.957733,218.069474 243.081637,220.106226 239.533689,223.744158 C235.985741,227.38209 234.071729,232.30766 234.232375,237.386703 C235.140918,261.00881 237.139711,284.335641 240.206042,307.344482 C241.229657,315.009072 235.871709,322.061674 228.21328,323.13041 C208.407052,325.878751 188.50997,327.854831 168.567461,329.081364 C163.553934,329.363976 158.646964,327.559295 155.011227,324.095664 C151.37549,320.632034 149.335155,315.818276 149.374499,310.796944 C149.374499,303.415035 154.144347,297.123378 159.595603,292.171821 C164.93329,287.288404 168.113189,281.087601 168.113189,274.296245 C168.113189,258.782881 151.350579,246.199566 130.635808,246.199566 C109.943751,246.199566 93.1584272,258.782881 93.1584272,274.296245 C93.1584272,280.974034 96.2701856,287.083982 101.426165,291.899258 C106.990988,297.100664 111.897118,303.551317 111.897118,311.160361 C111.936968,316.249834 109.899854,321.135515 106.256215,324.689136 C102.612575,328.242756 97.6774722,330.157037 92.5905881,329.989906 C67.7755409,329.085735 43.0189533,326.978468 18.4080872,323.675535 C12.1136684,322.838484 7.16152234,317.886338 6.32447103,311.591919 C3.03100376,286.972409 0.923778077,262.208717 0.0101001588,237.386703 C-0.157213178,232.295844 1.76013751,227.357166 5.31873175,223.712822 C8.87732599,220.068479 13.7689598,218.034101 18.8623585,218.080173 C26.4259754,218.080173 32.9220548,222.986303 38.0780339,228.551126 C42.8933095,233.729819 49.0259719,236.818864 55.7037598,236.818864 C71.2171242,236.818864 83.8004388,220.056253 83.8004388,199.341482 C83.8004388,178.672138 71.2171242,161.8641 55.7037598,161.8641 C48.912404,161.8641 42.711601,165.089426 37.8508982,170.4044 C32.8766277,175.855656 26.5849704,180.625505 19.203062,180.625505 C14.1817303,180.664848 9.36797262,178.624513 5.9043418,174.988776 C2.44071099,171.353039 0.636030022,166.446069 0.91864273,161.432542 C2.1451752,141.331038 4.14396886,121.456668 6.86959657,101.786721 C7.93833171,94.1282928 14.9909342,88.7703443 22.6555237,89.7939592 C45.8687864,92.883004 69.2183305,94.8817977 92.6133017,95.7676267 C97.6980302,95.9410879 102.633333,94.0320105 106.277724,90.4819448 C109.922115,86.931879 111.959926,82.0483236 111.919831,76.9607951 C111.919831,69.3744645 106.990988,62.878385 101.426165,57.7224058 C96.2701856,52.9071301 93.1811408,46.7744676 93.1811408,40.0966796 C93.1811408,24.5833149 109.943751,12 130.658522,12 C151.327865,12 168.113189,24.5833149 168.113189,40.0966796 C168.113189,44.0261263 167.840627,47.5240152 167.454496,50.8401957 C159.186759,57.4271295 153.326659,66.739691 153.326659,80.1406942 C153.326659,114.211041 191.190171,121.774658 210.11057,125.567824 C213.903735,144.488223 221.467352,182.351735 255.537698,182.351735 C272.164027,182.351735 282.475985,173.33445 289.13106,161.909527 L289.903321,161.886814 C305.416685,161.886814 318,178.649424 318,199.364195 C318,220.056253 305.416685,236.841577 289.903321,236.841577 C283.225533,236.841577 277.092871,233.729819 272.277595,228.57384 L272.277595,228.551126 Z"
            />
          </g>
        </g>
      </svg>
    </n-icon>
    <n-icon v-else-if="iconStyle == 'code-interpreter'" size="48">
      <svg
        width="512px"
        height="512px"
        viewBox="0 0 512 512"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <rect id="矩形" x="0" y="0" width="512" height="512" />
          <g id="编组" transform="translate(82.000000, 56.000000)" fill="#FFFFFF" fill-rule="nonzero">
            <path
              id="路径"
              d="M298.318199,11.7587896 C295.974865,4.73606068 289.402421,0 282,0 C274.597579,0 268.025135,4.73606068 265.681801,11.7587896 L253.934664,47.0298165 C252.222788,52.1716205 248.188742,56.2062428 243.047672,57.9183635 L207.757109,69.6671795 C200.735384,72.0108484 196,78.5842312 196,85.9877104 C196,93.3911897 200.735384,99.9645725 207.757109,102.308241 L243.047672,114.081636 C248.183224,115.788693 252.216249,119.813189 253.934664,124.945604 L265.681801,160.24121 C268.025135,167.263939 274.597579,172 282,172 C289.402421,172 295.974865,167.263939 298.318199,160.24121 L310.065336,124.945604 C311.777212,119.8038 315.811258,115.769178 320.952328,114.057057 L356.242891,102.308241 C363.264616,99.9645725 368,93.3911897 368,85.9877104 C368,78.5842312 363.264616,72.0108484 356.242891,69.6671795 L320.952328,57.9183635 C315.811258,56.2062428 311.777212,52.1716205 310.065336,47.0298165 L298.318199,11.7342105 L298.318199,11.7587896 Z"
            />
            <path
              id="形状"
              d="M179.6095,62 C174.158409,68.9615013 171.293052,77.5887246 171.5,86.4166667 C171.5,123.041667 212.3415,131.172417 232.75,135.25 C236.8415,155.589083 245,196.291667 281.75,196.291667 C318.5,196.291667 326.6585,155.589083 330.75,135.25 C333.347,134.73725 336.2625,134.029167 339.3985,133.150167 C342.02,147.360667 343,164.208167 343,184.083333 L343,232.916667 C343,330.583333 318.5,355 204.1585,355 L138.8415,355 C24.5,355 0,330.583333 0,232.916667 L0,184.083333 C0,86.4166667 24.5,62 138.8415,62 L179.585,62 L179.6095,62 Z M86.5095,146.725833 C81.8982481,141.963261 75.0672883,140.050901 68.6420861,141.723765 C62.2168839,143.396629 57.1973415,148.394383 55.5127099,154.796151 C53.8280783,161.197918 55.7405231,168.007444 60.515,172.6075 L84.28,196.291667 L60.515,219.975833 C53.7687079,227.191197 53.96777,238.435071 60.9652659,245.408766 C67.9627618,252.38246 79.245011,252.580846 86.485,245.8575 L123.235,209.2325 C130.400108,202.082872 130.400108,190.500462 123.235,183.350833 L86.485,146.725833 L86.5095,146.725833 Z M134.75,251.229167 C124.601768,251.229167 116.375,259.427952 116.375,269.541667 C116.375,279.655381 124.601768,287.854167 134.75,287.854167 L208.25,287.854167 C218.398232,287.854167 226.625,279.655381 226.625,269.541667 C226.625,259.427952 218.398232,251.229167 208.25,251.229167 L134.75,251.229167 Z"
            />
          </g>
        </g>
      </svg>
    </n-icon>
    <n-icon v-else-if="iconStyle == 'dalle'" size="48">
      <svg
        width="512px"
        height="512px"
        viewBox="0 0 512 512"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
      >
        <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <rect id="矩形" x="0" y="0" width="512" height="512" />
          <g id="编组" transform="translate(98.998872, 60.000000)" fill="#FFFFFF" fill-rule="nonzero">
            <path
              id="形状"
              d="M174.228141,50 C168.475158,53.0676225 163.466801,57.42148 159.614898,62.76034 C154.339394,70.0719825 151.500273,78.8589825 151.500273,87.875 C151.500273,96.8910175 154.339394,105.678018 159.614898,112.98966 C164.888886,120.29903 172.337161,125.76515 180.89038,128.6083 L213.529922,139.493828 L224.397566,172.126928 C227.243252,180.676073 232.704849,188.11346 240.012228,193.385408 C247.322132,198.66089 256.109167,201.5 265.125978,201.5 C274.142789,201.5 282.929824,198.66089 290.239728,193.385408 C295.577599,189.535287 299.933241,184.521142 303.001128,178.766667 L303.001051,264.34973 C302.99727,300.727611 302.808218,319.172979 293.35559,332.1839 C291.067931,335.332575 288.429295,338.200975 285.487659,340.736075 C284.42463,341.655175 283.323725,342.528825 282.184946,343.3545 C269.439503,352.61418 251.479143,352.984567 216.555431,352.999383 L213.231278,352.99999 L212.100767,353 L90.9002845,353 C90.5215608,353 90.1447307,353 89.7697809,352.99999 L86.4456433,352.999383 C51.5220648,352.984567 33.5606091,352.61418 20.8168632,343.3545 C19.6821237,342.53135 18.5834918,341.660225 17.5237451,340.746175 C14.5795834,338.20855 11.9348878,335.3351 9.64470372,332.1839 C0.385714077,319.438508 0.0153544912,301.478219 0.000540107729,266.554647 L0.000540107729,136.445376 C0.0153544912,101.521937 0.385714077,83.5605527 9.64470372,70.8168575 C12.7595561,66.52966 16.5296486,62.7595825 20.8168632,59.6447425 C33.5606091,50.3857897 51.5220648,50.0154316 86.4456433,50.0006173 Z M177.474294,214.128535 C172.653292,214.231303 168.158774,216.586118 165.329753,220.49103 L124.775314,276.46725 L110.535773,255.759725 C107.769119,251.7374 103.258441,249.2629 98.3786068,249.093725 C93.4987724,248.92455 88.8277563,251.078375 85.7886542,254.901225 L43.8368748,307.65605 L43.9469652,308.0449 C44.2542589,308.4085 44.5910953,308.74685 44.9541917,309.052375 C45.7298748,309.2872 47.5771721,309.73665 51.1493039,310.122975 C59.0438501,310.978063 69.7927137,311.07625 87.7503953,311.084367 L90.0993049,311.084966 C90.3647846,311.084989 90.6317736,311.085 90.9002845,311.085 L212.100767,311.085 L212.901727,311.084966 L215.250589,311.084367 C233.207964,311.07625 243.957931,310.978063 251.852,310.122975 C255.424889,309.73665 257.270671,309.2872 258.04585,309.052375 C258.409451,308.74685 258.747802,308.4085 259.053329,308.0449 C259.096254,307.90855 259.144229,307.73685 259.197254,307.527275 L189.879163,219.967093 C186.886016,216.18641 182.295296,214.025768 177.474294,214.128535 Z M107.31285,138.375 C89.8811905,138.375 75.7502242,152.50591 75.7502242,169.9375 C75.7502242,187.36909 89.8811905,201.5 107.31285,201.5 C124.744509,201.5 138.875475,187.36909 138.875475,169.9375 C138.875475,152.50591 124.744509,138.375 107.31285,138.375 Z"
            />
            <path
              id="路径"
              d="M281.69895,12.0322529 C280.529608,8.52820503 278.288999,5.48076835 275.291461,3.32135311 C272.293923,1.16193788 268.695368,0 265.001254,0 C261.30714,0 257.708586,1.16193788 254.711048,3.32135311 C251.71351,5.48076835 249.4729,8.52820503 248.303558,12.0322529 L236.283229,48.1234534 C235.418168,50.7185042 233.962149,53.0763837 232.028334,55.0104737 C230.09452,56.9443122 227.738234,58.4012931 225.14305,59.2652201 L189.031516,71.2872619 C185.528018,72.4567701 182.48094,74.6987049 180.322059,77.6959156 C178.162926,80.6928748 177.001128,84.2934511 177.001128,87.9873366 C177.001128,91.6814736 178.162926,95.2817985 180.322059,98.2790092 C182.48094,101.27622 185.528018,103.518155 189.031516,104.687411 L225.14305,116.734604 C227.735719,117.596267 230.089491,119.049224 232.023305,120.978535 C233.95712,122.908098 235.415653,125.260948 236.283229,127.85122 L248.303558,163.967646 C249.4729,167.471644 251.71351,170.519156 254.711048,172.678597 C257.708586,174.838037 261.30714,176 265.001254,176 C268.695368,176 272.293923,174.838037 275.291461,172.678597 C278.288999,170.519156 280.529608,167.471644 281.69895,163.967646 L293.719279,127.85122 C294.58434,125.256421 296.040359,122.89829 297.974174,120.964451 C299.907988,119.030361 302.264275,117.573632 304.859459,116.709453 L340.97074,104.687411 C344.473736,103.518155 347.521568,101.27622 349.679192,98.2790092 C351.839331,95.2817985 353.001128,91.6814736 353.001128,87.9873366 C353.001128,84.2934511 351.839331,80.6928748 349.679192,77.6959156 C347.521568,74.6987049 344.473736,72.4567701 340.97074,71.2872619 L304.859459,59.2652201 C302.264275,58.4012931 299.907988,56.9443122 297.974174,55.0104737 C296.040359,53.0763837 294.58434,50.7185042 293.719279,48.1234534 L281.69895,12.0071022 L281.69895,12.0322529 Z"
            />
          </g>
        </g>
      </svg>
    </n-icon>
  </n-avatar>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

import { getChatModelColor, getChatModelIconStyle } from '@/utils/chat';

import ChatGPTIcon from './ChatGPTIcon.vue';

const props = defineProps<{
  model?: string | null;
  iconStyle?: 'default' | 'plugins' | 'browsing' | 'code-interpreter' | 'dalle';
  color?: string;
  alpha?: number;
  size?: any;
}>();

const size = computed(() => {
  if (props.size) {
    return props.size;
  }
  return 'large';
});

const iconStyle = computed(() => {
  if (props.model) {
    return getChatModelIconStyle(props.model);
  }
  return props.iconStyle || 'default';
});

const colorMap = {
  green: '#10A37F',
  black: '#000000',
  purple: '#ab68ff',
  lightblue: '#9ECBFB',
  darkblue: '#2F94FF',
  darkgreen: '#0E7C7B',
  darkpurple: '#6F2C91',
};

const color = computed(() => {
  let result = '';
  if (props.color && colorMap[props.color as keyof typeof colorMap] != undefined) {
    result = colorMap[props.color as keyof typeof colorMap];
  } else if (props.color) {
    result = props.color;
  } else if (props.model) {
    const colorName = getChatModelColor(props.model);
    result = colorMap[colorName as keyof typeof colorMap];
  } else {
    result = colorMap.green;
  }
  // 先将 #xxxxxx 格式的 result 转换成 rgb 格式，再根据 opacity，将 result 改写为 rgba 形式。
  if (props.alpha && result.startsWith('#')) {
    const hex = result.replace('#', '');
    const r = parseInt(hex.substring(0, 2), 16);
    const g = parseInt(hex.substring(2, 4), 16);
    const b = parseInt(hex.substring(4, 6), 16);
    result = `rgba(${r}, ${g}, ${b}, ${props.alpha || 100})`;
  }

  return result;
});
</script>
